  <template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row :gutter="25">
        <div class="k-box" v-for="item in list" :key="item.id">
            <img src="../../assets/hamburger.png" class="image">
            <div class="k-content">
              <span class="k-name">好吃的汉堡</span>
              <p class="k-no">编号：{{ item.no }}</p>
              <time >下载时间：{{ item.currentDate }}</time>
            </div>
        </div>
    </el-row>
  </div>
</template>
<style scoped>
  .image {
    width: 100%;
  }
  .k-box {
    width:18.1999%;
    float:left;
    margin-left:15px;
  }
  .k-name {
    color: #222;
  }
  .k-content {
    font-size: 14px;
    color: #999;  
    padding: 10px;
    padding-bottom: 30px;
  }
  .k-no {
    padding:5px 0;
  }
</style>
<script>
  import {
    pagination,
    search,
    personal
  } from 'fac/mixin.js';
  import {
    mapMutations
  } from 'vuex';
  export default {
    name: 'download',
    mixins: [pagination, search, personal],
    beforeRouteUpdate(to, from, next) {
      //当搜索字符串变化时,路由发生改变,重新请求数据
      console.log(to);
      console.log(this.search);
      // this.fetchData()
      next();
    },
    data() {
      return {
        loading: false,
        list: [{
            id: 1,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
          {
            id: 2,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
          {
            id: 3,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
          {
            id: 4,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
           {
            id: 5,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
           {
            id: 5,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
           {
            id: 5,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          },
           {
            id: 5,
            no: 2151544512315 ,
            name: 'A Deep Breatn.jpg',
            currentDate: '2017-5-5 12:12:12'
          }
        ]
      }
    },
    methods: {
      //获取数据
      fetchData() {
        console.log('正在获取数据,页码为:', this.currentPage);
      }
    },


    watch: {
      currentPage(newVal, oldVal) {
        console.log('老值:', oldVal);
        console.log('新值:', newVal);
        this.fetchData();
      }
    },
    mounted() {
      this.isNotPersonalHomePage && this.renderPagination({
        total: 500,
        currentPage: 1
      });
    }
  }

</script>
